<template >
	<div id="bigbox">
		<div id="box">
			<p class="alert-user" v-if="all.flg_1">{{ all.esti_user }}</p>
			<p class="alert-user" v-if="all.flg_2">{{ all.user_no }}</p>
			<p class="alert-user" v-if="all.flg_3">{{ all.exite_user }}</p>
			<p class="alert-user" v-if="all.flg_5">{{ all.login_ok }}</p>
			<p class="alert-pass" v-if="all.flg_4">{{ all.esti_pass }}</p>
			<h1>login 登 入 </h1>
			<div class="inp">
				<input type="text" id="user" placeholder="请输入账号" v-model="user_info.user" />
				<br>
				<input type="password" id="pass" placeholder="请输入密码" v-model="user_info.pass" />
				<br>
				<button class="reg" @click="login()">登录</button>
				<button class="reg" @click="skip_register()">注册</button>
			</div>
			
		</div>
		<div ref="captcha" id="captcha"></div>
	</div>
</template>
<script>
import { ref } from 'vue'
import { getLogin } from '../api/api.js'
import '../jigsaw'
// import '../../dist/jigsaw.min.js'
export default {
	name: 'login',
	setup() {
		const user_info = ref({
			user: '',
			pass: ''
		})
		const all = ref({
			esti_user: '账 号 输 入 错 误',
			user_no: '账 号 或 密 码 不 能 为 空',
			exite_user: '用 户 不 存 在',
			esti_pass: '密 码 输 入 错 误',
			login_ok: '登 录 成 功',
			flg_1: false,
			flg_2: false,
			flg_3: false,
			flg_4: false,
			flg_5: false,
			flg_6: false
		})
		return {
			user_info,
			all
		}
	},
	mounted() {
		
		this.getCaptcha();
	},
	methods: {
		login() {
			let timer = null
			if (this.user_info.pass == '' && this.user_info.user == '') {
				this.all.flg_2 = true
				timer = setTimeout(() => {
					this.all.flg_2 = false
				}, 1500)
			} else {
				const _data = this.user_info
				console.log(_data)
				getLogin(_data)
					.then(res => {
						console.log(res)
						// 用户不存在
						if (res.data.isOk == 2) {
							this.all.flg_3 = true
							timer = setTimeout(() => {
								this.all.flg_3 = false
							}, 1500)
						} else if (res.data.isOk == 3) {
							this.all.flg_4 = true
							timer = setTimeout(() => {
								this.all.flg_4 = false
							}, 1500)
						} else {
							this.all.flg_5 = true
							timer = setTimeout(() => {
								this.all.flg_5 = false
							}, 1500)
							// this.all.flg_6 = true
							let isLogin = localStorage.setItem('isLogin', 1)
							this.$router.push('/')
							console.log(isLogin)
						}

					})
					.catch(err => {
						console.log(err)
					})
			}
		},
		skip_register() {
			this.$router.push('/register')
		},
		getCaptcha() {
			jigsaw.init({
				el: this.$refs.captcha,
				onSuccess: this.onSuccess,
				onFail: this.onFail,
				onRefresh: this.cleanMsg
			});
		},
		onSuccess() {
			console.log("成功");
			// 后台登录认证
		},
		onFail() {
			console.log("失败");
		},
		cleanMsg() {
			console.log("刷新");
		}
	}
}
</script>
<style scoped>
@import "../jigsaw";
* {
	margin: 0;
	padding: 0;
	outline: none;
}

/* #captcha{
	position: absolute;
	top: -220px;
} */
input::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
}

#bigbox {
	width: 100%;
	height: calc(100vh - 30px);
	padding-top: 30px;
	background: linear-gradient(to top, #e56567, #9397e1);
}

#box {
	margin: 100px auto;
	width: 400px;
	height: 300px;
	border-radius: 8px;
	background-color: #0c132c;
	box-shadow: 0 20px 20px rgba(12, 19, 44, .8);
	overflow: hidden;
}

h1 {
	width: 100%;
	height: 30px;
	text-align: center;
	margin-top: 30px;
	color: #fff;
	font-size: 26px;
}

.inp {
	margin-top: 20px;
	width: 100%;
	text-align: center;
	color: #fff;

}

.inp>input {
	width: 200px;
	padding: 6px 15px;
	border-radius: 50px;
	height: 20px;
	background-color: rgba(255, 255, 255, .5);
	margin-top: 20px;
	border: 2px solid rgb(61, 143, 199);
	text-align: center;
	line-height: 20px;
	color: #fff;
	font-size: 18px;
}

.reg {
	margin: 30px 15px;
	height: 30px;
	font-size: 18px;
	color: #fff;
	width: 100px;
	background-color: rgba(255, 255, 255, .5);
	border: 2px solid rgb(61, 143, 199);
	border-radius: 50px;
	cursor: pointer;
}

.reg:hover {
	color: #e56567;
}

/* 提示框 */
.alert-user,
.alert-pass {
	position: absolute;
	font-size: 14px;
	color: rgba(203, 45, 1, 0.7);
	left: 50%;
	transform: translateX(-50%);
}

.alert-user {
	top: 205px;
}

.alert-pass {
	top: 267px;
}
</style>